<template>
    <div>
        <el-button type="primary" @click="newManagerDialogVisible = true">{{$t('manager.add')}}</el-button>
        <el-table :data="managerList" style="width: 100%" stripe>
            <el-table-column width="80" prop="ID" label="ID"/>
            <el-table-column prop="Name" :label="$t('manager.account')"/>
            <el-table-column prop="IsCheck" :label="$t('manager.is_check')">
                <template v-slot="scope">{{scope.row.IsCheck}}</template>
            </el-table-column>
            <el-table-column prop="Token" :label="$t('manager.token')"/>
            <el-table-column :label="$t('general.operate')" width="300">
                <template v-slot="scope">
                    <el-button size="small" v-if="scope.row.Token !== token"
                               @click="refreshToken(scope.row.ID)">{{$t('manager.refresh_token')}}
                    </el-button>
                    <el-button size="small" disabled v-else>{{$t('manager.refresh_token')}}</el-button>
                    <el-button size="small" v-if="!scope.row.IsCheck" type="warning" @click="editPassword(scope.row.ID)">
                        {{$t('manager.change_password')}}
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteManager(scope.row.ID)">
                        {{$t('manager.delete')}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- New account -->
        <el-dialog :title="$t('manager.add')" v-model="newManagerDialogVisible">
            <el-form :model="newManagerForm" label-width="120px">
                <el-form-item>
                    <el-checkbox v-model="newManagerForm.IsCheck">{{$t('manager.is_check')}}</el-checkbox>
                </el-form-item>
                <el-form-item :label="$t('manager.account')">
                    <el-input v-model="newManagerForm.Name"/>
                </el-form-item>
                <el-form-item v-if="!newManagerForm.IsCheck" :label="$t('manager.password')">
                    <el-input v-model="newManagerForm.Password"/>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onNewManager">{{$t('manager.add')}}</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import utils from '@/utils.js'

const { proxy } = getCurrentInstance()
const { t } = useI18n()

const token = localStorage.getItem('managerToken')
const newManagerDialogVisible = ref(false)
const managerList = ref(null)

const newManagerForm = reactive({
                Name: '',
                Password: '',
                IsCheck: false,
            })

onMounted(() => {
            getManager()
        })


function getManager() {
                utils.GET('/manager/managers').then(res => {
                    managerList.value = res
                }).catch(err => proxy.$message.error(err))
            }

function onNewManager() {
                utils.POST('/manager/manager', newManagerForm).then(res => {
                    newManagerDialogVisible.value = false
                    object.assign(newManagerForm, {
                        Name: '',
                        Password: '',
                        IsCheck: false,
                    })
                    proxy.$message.success(res)
                    getManager()
                }).catch(err => proxy.$message.error(err))
            }

function editPassword(id) {
                proxy.$confirm(t('manager.change_password_confirm'), t('manager.confirm'), {
                    confirmButtonText: t('general.apply'),
                    cancelButtonText: t('general.cancel'),
                    type: 'warning'
                }).then(() => {
                    utils.GET('/manager/manager/changePassword?id=' + id).then(res => {
                        proxy.$alert(res, t('manager.new_password'), {
                            confirmButtonText: t('manager.save_confirm')
                        });
                    }).catch(err => proxy.$message.error(err))
                }).catch(() => {
                })
            }

function deleteManager(id) {
                proxy.$confirm(t('manager.delete_account_confirm'), t('manager.confirm'), {
                    confirmButtonText: t('general.apply'),
                    cancelButtonText: t('general.cancel'),
                    type: 'warning'
                }).then(() => {
                    utils.DELETE('/manager/manager?id=' + id).then(res => {
                        getManager()
                        proxy.$message.success(res)
                    }).catch(err => proxy.$message.error(err))
                }).catch(() => {
                })
            }

function refreshToken(id) {
                proxy.$confirm(t('manager.refresh_token_confirm'), t('manager.confirm'), {
                    confirmButtonText: t('general.apply'),
                    cancelButtonText: t('general.cancel'),
                    type: 'warning'
                }).then(() => {
                    utils.GET('/manager/manager/token?id=' + id).then(res => {
                        getManager()
                        proxy.$alert(res, t('manager.new_token'), {
                            confirmButtonText: t('manager.save_confirm')
                        });
                    }).catch(err => proxy.$message.error(err))
                }).catch(() => {
                })
            }
</script>

<style scoped>

</style>